<template>
  <div>
    <el-card class="box-card">

      <!--      面包屑-->
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>

      <!--      图表部分-->
      <div class="container">
        <div style="width: 100%;height: 50%; padding: 1%">
          <el-row style="height: 100%;">
            <el-col :span="13" style="height: 100%;">
              <!--              储罐地域分布柱状图-->
              <div id="areaDistribute" style="width: 100%;height:100%;"></div>
            </el-col>
            <el-col :span="11" style="height: 100%">
              <!--              储罐使用年份柱状图-->
              <div id="usedTime" style="width: 100%;height:100%;"></div>
            </el-col>
          </el-row>
        </div>
        <div style="width: 100%;height: 50%;padding: 1%">
          <el-row style="height: 100%;">
            <el-col :span="12" style="height: 100%">
              <!--              储罐灌顶类型统计图-->
              <div id="topDevStatistics" style="width: 100%;height:100%;"></div>
            </el-col>
            <el-col :span="12" style="height: 100%;">
              <!--              储罐灌顶类型统计图-->
              <div id="nominalVolStatistics" style="width: 100%;height:100%;"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '../BreadCrumb/BreadCrumb.vue'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

export default {
  data() {
    return {
      // 面包屑
      naviItems: [{text: '储罐'}, {text: '数据引擎', to: '/chuguan/dataEngine'}],

      /**
       *   图表相关数据-01.储罐地域分布图
       **/
      areaDistribute: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐地域分布',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            data: ["江苏", "浙江", "河北",
              "广东", "辽宁", "青海", "澳门", "天津",
               "湖南", "内蒙古", "山东", "北京", "海南"],
            axisLabel:{interval: 0}
          },
          yAxis: {
            type: 'value',   //刻度自适应
            scale: true,
            name: '单位：台',
            minInterval: 1,
            boundaryGap: [0, 0.1]
          },
          series: [{
            //name: '台',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [35,33,24,10,9,7,6,6,5,4,3,2,2],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        },
      },

      /**
       *   图表相关数据-02.储罐投入使用年份
       **/
      usedTime: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐投入使用年份',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            axisLabel: {//文字倾斜
              interval: 0,
              rotate: 40
            },
            data: ["未知","2016年", "2017年", "2018年",]
          },
          yAxis: {
            type: 'value',
            //scale: true,
            name: '单位：台',
            minInterval: 1,
            boundaryGap: [0, 0.1],
          },
          series: [{
            barWidth: '50%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [126, 4, 2, 14,],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }

      },

      /**
       * 图表相关数据-03 储罐灌顶类型统计图
       */
      topDev: {
        option: {
          color: [ '#f3cd0e',
            '#25f30e', '#0e88f3', '#b60ef3', '#f30ec1','#d0961f',
            '#1fd0ad'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐灌顶类型统计图',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom',
            left: 'center',
          },
          series: [{
            radius: '80%',
            type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [
              {value: 6, name: '内浮顶'},
              {value: 23, name: '内浮顶罐'},
              {value: 8, name: '外浮顶'},
              {value: 29, name: '拱顶'},
              {value: 33, name: '拱顶罐'},
              {value: 25, name: '浮顶罐'},
              {value: 22, name: '立式圆筒形型'},
            ],
            label: {  //图上方显示值
              normal: {
                show: true,
               // formatter: '{c},({d}%)',   //c：值，b:名字，d:百分比
                //修改饼状图百分比位数
                formatter:function(data){
                  console.log("dataxianshi"+data)
                  return data.value+',\n'+data.percent.toFixed(0)+"%"; //取小数点后0位
                  },
                position:'inside'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },


      /**
       * 图表相关数据04 储罐公称容积统计图
       */
      nominalVol: {
        option: {
          color: ['#20507a', '#e96d11', '#a29b9b', '#f5dd08',  //从右到左分配颜色
            '#0f7ed2', '#4f8611'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐公称容积统计图',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 'center',
            right: '20',
          },
          series: [{
            radius: '80%',
            type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [
              {value: 12, name: '0-10000m3(不含1000m3)'},//对应病状图中的右到左 6
              {value: 32, name: '1000-2000m3'},
              {value: 15, name: '2000-3000m3'},
              {value: 19, name: '3000-4000m3'},
              {value: 1, name: '4000-5000m3'},
              {value: 67, name: '5000m3及以上'},
            ],
            label: {  //图上方显示值
              normal: {
                show: true,
                formatter: '{c}',
                position:'inside'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      }

    }
  }
  ,
  created() {

  }
  ,
  mounted() {
    this.areaDistributeShow();
    this.usedTimeShow();
    this.topDevStatisticsShow();
    this.nominalVolStatisticsShow();
  }
  ,
  components: {
    Breadcrumb,
  }
  ,
  methods: {

    /**
     * 储罐地域分布显示
     */
    areaDistributeShow: function () {
      var chartDom = document.getElementById('areaDistribute');
      var myChart = echarts.init(chartDom);
      var option = this.areaDistribute.option
      myChart.setOption(option);
    }
    ,

    /**
     * 储罐投入使用年份
     */
    usedTimeShow: function () {
      var chartDom1 = document.getElementById('usedTime');
      var myChart2 = echarts.init(chartDom1);
      var option2 = this.usedTime.option
      myChart2.setOption(option2);
    } ,

    /**
     * 储罐灌顶类型统计图
     */
    topDevStatisticsShow: function () {
      let chartDom1 = document.getElementById('topDevStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.topDev.option
      myChart2.setOption(option2);
    } ,

    /**
     * 储罐公称容积统计图
     */
    nominalVolStatisticsShow: function () {
      let chartDom1 = document.getElementById('nominalVolStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.nominalVol.option
      myChart2.setOption(option2);
    },

    // 获取页面需要的数据
    async searchDetailData() {
      const res = await searchDataEngineDetailData(this.detailDataSearchArgs)
      this.detailData = res.data
      // 设置各个图表
      //  await this.setGeoChart([{ name: '重庆', value: 455449}])
      await this.setGeoChart(this.detailData.DistrictInfo)
      await this.setGasTypeChart(this.detailData.GasTypeInfo)
      await this.setGasUseYearsChart(this.detailData.UseYearsInfo)
      await this.setRecordChart(this.detailData.GasRecordInfo)
    }
    ,
  }
}

</script>

<style lang="less" scoped>

div.container {
  height: 82vh; //相对于视图高度100%
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 500;
}
</style>
